<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>全栈升班面试题</title>
	<link href="./index.css" rel="stylesheet">
	<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="./axios.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		
		<div class="top">
			<div class="con">
				<p>得分:<span class="span">{{score}}</span></p>
				<button type="button" @click="Luck">{{buttonname}}</button>
				&nbsp;&nbsp;<button type="button" @click="infoShow = !infoShow" style="background: #A00000;">{{rulename}}</button>
			</div>
		</div>
		<div class="conter">
			<ul>
				<li v-for="(item,key) in list" :key="key" v-show="!item.done" v-bind:class="{activeok:item.show==true}">
					<span>{{key+1}}、{{item.title}}
						<template v-if="key<9">
							<span :style="{color:colors[item.level]}">
								【{{item.level}}】
							</span>
						</template>
					</span> <button class="no" @click="errorHandle(item)">重置</button><button @click="rightHandle(item)"
						class="yes">正确</button>
				</li>

			</ul>

		</div>

		<!-- 考试说明: -->
		<div class="info" v-show="infoShow">
			<div @click="infoShow = false" class="close">X</div>
			<h4>面试说明（建议使用谷歌浏览器预览）</h4>
			<p>1、面试官提前10分钟进入会议室，检查考生证件（身份证）。</p>
			<p>2、面试开始前，要求考生视频展示面试环境。</p>
			<p>3、面试官及考生均需开启视频，要求考生与摄像头保持一米距离。</p>
			<p>4、面试过程需要录屏留存，没有录屏的学生成绩视为零。</p>
			<h4>评分标准</h4>
			<p>1、满分20分，考核项为专业知识、形象礼仪。其中专业知识为9道题，每题2分，形象礼仪满分2分。</p>
			<p>2、专业知识：每道题回答正确率超过50%，则给予2分满分，正确率少于等于50%，则给 0分，每道题不可以出现1分的得分。</p>
			<p>3、形象礼仪：着装正式，干净整洁，口语礼貌。</p>
			<p>4、考生答题过程中或者听到题目后停顿超过10秒钟，本道题零分处理。</p>
			<p>5、面试弃考的学生，月考总分记为零分，按照降班重修处理。</p>
		</div>
		<div id="cover" v-show="infoShow"> 

		</div>
	</div>

</body>

</html>
<script>
	var vm = new Vue({
		el: "#app",
		mounted() {
			axios({
				url: "./data.json"
			}).then(res => {
				console.log(res);
				this.arr = res.data.data;
			})
		},
		data: {
			arr: [],
			list: [],
			buttonname: '随机出题',
			rulename: '查看考试规则',
			colors:{
				"A":"#FF0000",
				"B":"#008800",
				"C":"#0088dd"
			},
			infoShow:false,
		},
		methods: {
			Luck() {
				this.arr.forEach(item => {
					item.show = false;
				})
				//渲染要显示的列表数据
				this.list = []
				//中间数据临时数据
				let app = [];
				let self = this;
				let obj = {};
				//最后拓展，形象礼仪分数
				app.unshift({ id: this.arr.length + 1, title: '形象礼仪', show: false, done: false });

				while (app.length < 10) {
					var num = parseInt(Math.random() * this.arr.length);
					var bool = true;
					app.forEach((item) => {
						if (item.id == this.arr[num].id) {
							bool = false;
						}
						//判断对象如果出现了三次，则直接跳过
						if (obj[this.arr[num].level] >= 3) {
							bool = false;
						}
					});

					if (bool) {
						if (obj.hasOwnProperty(this.arr[num]['level'])) {
							obj[this.arr[num]['level']]++;
						} else {
							obj[this.arr[num]['level']] = 1;
						}
						app.unshift(this.arr[num]);
					}
				}
				console.log(obj);
				this.list = app;
			},
			rightHandle(item) {
				item.show = true;
			},
			errorHandle(item) {
				item.show = false;
			}
		},
		//计算
		computed: {
			score() {
				var sum = 0;
				this.list.forEach(item => {
					if (item.show == true) {
						sum += 2;
					}
				})
				return sum;
			}
		},

	})






</script>